<template>
	<view>
		<!-- bg S -->
		<view class="bg-box column_align tp-fcF tp-bbox">
			<view class="flex align_baseline tp-mt80">
				<view class="">
					{{getCustomerInfo.rewardPoint || 0}}
				</view>
			</view>
			<text class="tp-fz26 tp-mt20">积分余额</text>
			<view class="jife-hint tp-fz24 tp-lh64 tp-ptb0lr30"@click="pageJumps('/pages/others/depositRule?type=17&name=积分说明')">
				积分说明
			</view>
		</view>
		<!-- bg E -->

		<!-- 列表 S -->
		<view class="list tp-w690 tp-br15 tp-bgf">
			<view class="tp-bgf level_align flex_between tp-pr tp-br20  tp-ptb0lr30 tp-mt20 tp-h64">
				<view class="level_align tp-fc333 tp-fz30 ">
					<view class="tp-mr20 lan-line"></view>
					<text>积分明细</text>
				</view>
			</view>
			<!--  分类小于5个 不可以滚动 -->
			<div class="navbar">
				<view class="tfc-list" v-if="navbarList.length<6">
					<view class="tfc-item" :style="{width: 100/navbarList.length+'%',height,lineHeight:height,padding: height?'0':'30rpx 0'}"
					 :class="{active: curNavbar.alias === item.alias}" v-for="(item, index) in navbarList" :key="index" @click="handleChooseNavbar(item,index)">{{item.name}}</view>
				</view>
			</div>

			<view class="swiper-wrap" :style="{height: swiperHeight}">
				<swiper class="swiper" :current="curSwiperIndex" @change="handleSwiper">
					<swiper-item class="swiper-item" v-for="(it_date, in_date) in dateList" :key="in_date">
						<scroll-view scroll-y="true" class="content-wrap" refresher-enabled enable-back-to-top :refresher-triggered="refresherTriggered"
						 @scrolltolower="handleScrolltolower(it_date,in_date)" @refresherrefresh="handleRefresherrefresh">
							<view class="sw-content">
								<!-- 暂无数据 S -->
								<view v-if="it_date.length == 0">
									<view class="tp-h98 tp-w100"></view>
									<text class="tp-h98 center_combo">暂无明细</text>
								</view>
								<!-- 暂无数据 E -->
								<view class="list-item tp-pt20 tp-pb20 tp-bgf tp-mb2 level_align flex_between tp-bdbm" v-for="(item, index) in it_date"
								 :key="index">
									<!--数据展示的样式 S-->
									<!-- <view class=""> -->
									<view class="level_align">
										<view class="flex flex_column  flex-1">
											<text class="tp-fc333 tp-fz28">{{item.description}}</text>
											<text class="tp-fc999 tp-fz26 tp-mt10">{{item.createTime}}</text>
										</view>
									</view>
									<view class="tp-fz36 tp-fw500 tp-fc333">
										{{item.jifenDetail}}
									</view>
									<!-- </view> -->
									<!--数据展示的样式 E-->
								</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 列表 E -->
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navbarList: [{ // 有几个navBar
						name: '全部',
						alias: '-1'
					}, {
						name: '收入',
						alias: '1'
					},
					{
						name: '支出',
						alias: '2'
					},
				],
				height: '88rpx', // navbar 的高度
				swiperHeight: 'calc(100vh - 560rpx)', // 数据展示的高度
				curSwiperIndex: 0, // navbar 的index
				pageNum: 1, // 当前页码,请设置初始值
				pageSize: 10, // 每页显示数量,请设置初始值
				last_page: null, // 总页数
				curNavbar: { // 选中的导航数据
					name: '全部',
					alias: '-1'
				},
				list0: [14], // 分类0 的数据
				list1: [], // 分类1 的数据
				list2: [], // 分类2 的数据
				refresherTriggered: true, // 设置当前下拉刷新状态
				loadMoreText: "加载中...",
				showLoadMore: false, // 加载更多
			};
		},
		computed: {
			// 展示的数据
			dateList() { //每个分类的数据
				return [this.list0, this.list1, this.list2]
			}
		},
		onShow() {
			this.getDetailList()
		},
		methods: {
			// 获取明细列表
			getDetailList() {
				this.$http.get(this.$api.jifenDetail + '?type=' + this.curNavbar.alias + '&pageSize10&pageNum=' + this.pageNum)
					.then(res => {
						this.stopPullDownRefresh()
						this.showLoadMore = false;
						if (res.code === 200) {
							this.last_page = res.data.pageTotal
							if (this.pageNum > 1) {
								this['list' + this.curSwiperIndex] = this['list' + this.curSwiperIndex].concat(res.data.result);
							} else {
								this['list' + this.curSwiperIndex] = res.data.result
							}
						}
					})
			},

			// 处理选择导航条
			handleChooseNavbar(item, i) {
				this.curNavbar = item
				this.curSwiperIndex = i
				console.log('handleChooseNavbar导航条改变', item, i)
			},
			// 处理swiper
			handleSwiper(e) {
				let i = e.detail.current
				this.curNavbar = this.navbarList[i]
				this.curSwiperIndex = i
				this['list' + this.curSwiperIndex] = []
				this.pageNum = 1
				this.getDetailList()
			},
			// 滚动到底部
			handleScrolltolower(item, i) {
				console.log('handleScrolltolower滚动到底部', item, i);
				this.showLoadMore = true;
				if (this.pageNum < this.last_page) {
					this.pageNum++
					this.getDetailList();
				} else {
					this.loadMoreText = "已没有更多数据!"
				}
			},
			// 下拉刷新
			handleRefresherrefresh(item, i) {
				this.refresherTriggered = true
				this['list' + this.curSwiperIndex] = []
				this.pageNum = 1
				this.getDetailList()
			},
			// // 停止下拉刷新
			stopPullDownRefresh() {
				this.refresherTriggered = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg-box {
		height: 460rpx;
		padding: 50rpx;
		background: url(./static/jfien1.png) no-repeat;
		background-size: 100%;
		background-position: top center;
		font-size: 68rpx;

		.jifen-img {
			width: 36rpx;
			height: 36rpx;
		}

		.btn {
			width: 180rpx;
			height: 64rpx;
			border-radius: 32rpx;
			color: #FC9E24;
			font-size: 29rpx;
			box-shadow: 0px 0px 18px 0px rgba(127, 127, 127, 0.19);
		}

		.jife-hint {
			position: absolute;
			right: 0;
			top: 60rpx;
			background: rgba(255, 255, 255, .3);
			border-radius: 32rpx 0px 0px 32rpx;
		}

	}

	.content {
		width: 480rpx;
		height: 400rpx;
		padding: 40rpx;
		font-size: 30rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20px;

		.close_img {
			width: 42rpx;
			height: 42rpx;
		}
	}

	.list {
		margin-top: -120rpx;
		box-shadow: 0px 0px 18px 0px rgba(127, 127, 127, 0.19);

		.list-item {
			.money-img {
				width: 56rpx;
				height: 56rpx;
			}
		}
	}

	.navbar {
		.tfc-list {
			display: flex;
			justify-content: space-evenly;
			z-index: 2;
			background-color: #fff;

			.tfc-item {
				font-size: 32rpx;
				font-weight: 500;
				transition: all 0.1s ease-in;
				text-align: center;

				&.active {
					color: $tc;
					position: relative;
					font-size: $tc;

					&::before {
						content: '';
						height: 6rpx;
						width: 36rpx;
						border-radius: 3rpx;
						background-color: $tc;
						position: absolute;
						bottom: -3rpx;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}
	}

	.swiper-wrap {
		.swiper {
			.swiper-item {
				.content-wrap {
					height: 100%;
					box-sizing: border-box;

					.sw-content {
						padding: 0 30rpx;
					}
				}
			}
		}
	}
</style>
